<template>
  <div class="dashboard-container" >
    <h1 style="text-align: center;margin-bottom: 40px;font-size: 35px;color: #486180">住房管理</h1>

    <el-dialog title="入住" :visible.sync="addButtonController" width="30%" @close="closeLive('ruleForm')">
      <el-form label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="addList.roomNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入房间号"/>
        </el-form-item>

        <el-form-item label="顾客" prop="customerId">
          <el-select v-model="addList.customerId" clearable placeholder="顾客" style="width: 80%" >
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName + '-' + item.identificationCard"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="100" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="insertStay('ruleForm')">确 定</el-button>
        <el-button plain @click="close('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除" :visible.sync="cancelStayButtonController" width="30%" @close="closeCancelStay('ruleForm')">
      <div style="margin: 10px"><span>请确认是否退房</span></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="info" plain @click="cancelStay('ruleForm')">确定</el-button>
          <el-button plain @click="closeCancelStay('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="作废" :visible.sync="abrogateStayButtonController" width="30%" @close="closeAbrogateStay('ruleForm')">
      <div style="margin: 10px"><span>请确认是否作废</span></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="info" plain @click="abrogateStay('ruleForm')">确定</el-button>
          <el-button plain @click="closeAbrogateStay('ruleForm')">取消</el-button>
      </span>
    </el-dialog>

    <el-input
      v-model="roomNumber"
      placeholder="房间号"
      name="roomNumber"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-select v-model="state" clearable placeholder="房间状态" style="margin-left: 40px;width: 200px">
      <el-option
        v-for="item in states"
        :key="item.state"
        :label="item.state"
        :value="item.state">
      </el-option>
    </el-select>
    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="selectLive">查询</el-button>
    <el-button  style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="checkLive">重置</el-button>
    <el-table :data="LiveList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="650px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="roomId" label="房间ID"/>
      <el-table-column align="center" fixed prop="roomNumber" label="房间号"/>
      <el-table-column align="center" fixed label="房间状态">
        <template v-slot="scope">
          <el-tag
            :type="scope.row.state === '已入住' ? 'danger' : scope.row.state === '空用' ? 'success' : 'info'"
            size="small"
          >
            {{ scope.row.state }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed prop="remark" label="房间备注"/>
      <el-table-column align="center" fixed prop="roomTypeName" label="房间类型"/>
      <el-table-column align="center" fixed prop="roomPrice" label="房间价格"/>
      <el-table-column align="center" fixed prop="customerName" label="顾客名称"/>
      <el-table-column align="center" fixed prop="identificationCard" label="身份证号"/>
      <el-table-column align="center" fixed label="操作">

        <template v-slot="scope">
          <el-button v-if="scope.row.state === '已入住'" type="text"  @click="cancelStayButton(scope.row)">退房</el-button>
          <el-button  v-if="scope.row.state === '已入住'" type="text"  @click="abrogateStayButton(scope.row)">作废</el-button>
          <el-button  v-if="scope.row.state === '空用'" type="text"  @click="addButton(scope.row)">入住</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[7,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="LiveList.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {abrogateStay, cancelStay, insertStay, selectAllStay} from "@/api/stay";
import {selectAllCustomer} from "@/api/Customer";


export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      currentPage: 1,
      currentIndex: '',
      pagesize: 7,

      state:'',
      roomNumber:'',
      LiveList:[],
      states:[],
      customerList:[],
      addButtonController:false,
      cancelStayButtonController:false,
      abrogateStayButtonController:false,
      abrogateStayLiveTableId:'',
      abrogateStayLiveId:'',
      addList:{
        customerId:'',
        roomNumber:'',
        customerName:'',
        identificationCard:'',
        remark:'',
        roomPrice: ''
      },
      liveTableId:'',
    }
  },
  mounted() {
    this.selectLive()
    this.fetchLive()
    this.fetchCustomerList()
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    insertStay(formName){
      this.$refs[formName].validate((valid) =>{
        if (valid) {
          insertStay({
            customerId: this.addList.customerId,
            roomNumber: this.addList.roomNumber,
            roomId: this.addList.roomId,
            customerName: this.addList.customerName,
            identificationCard: this.addList.identificationCard,
            remark: this.addList.remark,
            roomPrice: this.addList.roomPrice
          }).then(
            async response => {
              this.addButtonController  = false
              this.$message.success('入住成功')
              this.selectLive()
            }
          )
        } else {
          return false
        }
      })
    },
    fetchLive() {
      selectAllStay().then(response => {
        this.states = Object.values(
          response.data.reduce((selectState, item) => {
            selectState[item.state] = item; // 保留最后一个出现的重复项
            return selectState;
          }, {})
        );
      });
    },
    selectLive() {
      this.currentPage = 1
      selectAllStay({
        roomNumber: this.roomNumber,
        state: this.state
      }).then(
        response => {
          console.log(response.data)
          this.LiveList = response.data
        }
      )
    },
    close(formName){
      this.$refs[formName].resetFields();
      this.addButtonController =false
      this.cancelStayButtonController =false
    },
    closeLive(formName){
      this.$refs[formName].resetFields()
      this.addButtonController = false
      this.cancelStayButtonController= false
    },
    closeCancelStay(){
      this.cancelStayButtonController = false
    },
    cancelStay(){
      cancelStay({
        liveTableId: this.liveTableId
      }).then(response => {
          this.selectLive()
          this.cancelStayButtonController = false
        }
      )
    },
    abrogateStay(formName){
      abrogateStay({
        liveTableId: this.abrogateStayLiveTableId
        ,liveId: this.abrogateStayLiveId
      }).then(
        async response => {
          this.abrogateStayButtonController = false
          this.selectLive()
        })
    },
    closeAbrogateStay(){
      this.abrogateStayButtonController = false
    },
    checkLive(){
      this.state=''
      this.roomNumber=''
      this.selectLive()
    },
    cancelStayButton(row){
      this.liveTableId = row.liveTableId
      this.cancelStayButtonController = true
    },
    abrogateStayButton(row){
      this.abrogateStayLiveTableId = row.liveTableId
      this.abrogateStayLiveId = row.liveId
      this.abrogateStayButtonController = true
    },
    addButton(row){
      this.addList = {
        customerId: '',
        roomNumber: row.roomNumber,
        roomId: row.roomId,
        roomTypeName: row.roomTypeName,
        customerName: '',
        identificationCard: '',
        remark: '',
        roomPrice: row.roomPrice,
      }
      this.addButtonController = true
    },
    fetchCustomerList() {
      selectAllCustomer().then(response => {
        this.customerList = response.data.map(customer => ({
          customerId: customer.customerId,
          customerName: customer.customerName,
          identificationCard: customer.identificationCard
        }));
      });
    },


  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
